import React, { useState, useMemo } from 'react';
import './Model.css';

// 类型定义
type TabType = 'recommend' | 'recent' | 'favorite';

interface Material {
  id: string;
//   name: string;
  thumbnail: string; // 使用图片URL
}

interface MaterialCategory {
  id: string;
  name: string;
  materials: Material[];
}

// 使用线上图片
const MaterialData: MaterialCategory[] = [
  {
    id: 'party',
    name: '党建元素',
    materials: [
      { 
        id: 'm1', 
        thumbnail: 'https://img95.699pic.com/photo/50058/5989.jpg_wh300.jpg' 
      },
      { 
        id: 'm2', 
        thumbnail: 'https://img95.699pic.com/photo/50062/7348.jpg_wh300.jpg' 
      },
      { 
        id: 'm3', 
        thumbnail: 'https://img95.699pic.com/photo/50080/1435.jpg_wh300.jpg' 
      },
      { 
        id: 'm4', 
        thumbnail: 'https://img95.699pic.com/photo/50050/7348.jpg_wh300.jpg' 
      },
      { 
        id: 'm5', 
        thumbnail: 'https://img95.699pic.com/photo/50077/1036.jpg_wh300.jpg' 
      },
    ]
  },
  {
    id: 'food',
    name: '餐饮美食',
    materials: [
      { 
        id: 'm6', 
        thumbnail: 'https://img95.699pic.com/photo/50100/0003.jpg_wh300.jpg' 
      },
      { 
        id: 'm7', 
        thumbnail: 'https://img95.699pic.com/photo/50068/1460.jpg_wh300.jpg' 
      },
      { 
        id: 'm8', 
        thumbnail: 'https://img95.699pic.com/photo/50077/1043.jpg_wh300.jpg' 
      },
      { 
        id: 'm9', 
        thumbnail: 'https://img95.699pic.com/photo/50092/0005.jpg_wh300.jpg' 
      },
    ]
  },
  {
    id: 'plant',
    name: '花卉植物',
    materials: [
      { 
        id: 'm10', 
        thumbnail: 'https://img95.699pic.com/photo/50063/7329.jpg_wh300.jpg' 
      },
      { 
        id: 'm11', 
        thumbnail: 'https://img95.699pic.com/photo/50062/7377.jpg_wh300.jpg' 
      },
      { 
        id: 'm12', 
        thumbnail: 'https://img95.699pic.com/photo/50074/1165.jpg_wh300.jpg' 
      },
    ]
  }
];

const Model: React.FC = () => {
  const [activeTab, setActiveTab] = useState<TabType>('recommend');
  const [searchTerm, setSearchTerm] = useState<string>('');

  // 处理搜索和过滤 useMemo
  const filteredCategories = useMemo(() => {
    return MaterialData.map(category => {
      const term = searchTerm.toLowerCase().trim();
      if (!term) return category;
      
      // 检查分类名称是否匹配
      const categoryMatch = category.name.toLowerCase().includes(term);
      
      // 过滤素材
      const filteredMaterials = category.materials.filter(material => {
        // 检查素材名称是否匹配
        const nameMatch = material.name.toLowerCase().includes(term);
        // 检查标签是否匹配
        const tagMatch = material.tags.some(tag => tag.toLowerCase().includes(term));
        return nameMatch || tagMatch;
      });
      
      // 保留匹配的分类或匹配素材的分类
      return (categoryMatch || filteredMaterials.length > 0) 
        ? { ...category, materials: filteredMaterials } 
        : null;
    }).filter(Boolean) as MaterialCategory[];
  }, [searchTerm]);

  // 切换标签页
  const handleTabChange = (tab: TabType) => {
    setActiveTab(tab);
    setSearchTerm(''); // 清空搜索框
  };

  return (
    <div className="material-selector-container">
      {/* 搜索框 */}
      <div className="search-box">
        <input
          type="text"
          placeholder="搜索素材"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <button className="search-button">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
          </svg>
        </button>
      </div>

      {/* 标签页 */}
      <div className="material-tabs">
        <button 
          className={`tab-button ${activeTab === 'recommend' ? 'active' : ''}`}
          onClick={() => handleTabChange('recommend')}
        >
          推荐素材
        </button>
        <button 
          className={`tab-button ${activeTab === 'recent' ? 'active' : ''}`}
          onClick={() => handleTabChange('recent')}
        >
          最近使用
        </button>
        <button 
          className={`tab-button ${activeTab === 'favorite' ? 'active' : ''}`}
          onClick={() => handleTabChange('favorite')}
        >
          收藏
        </button>
      </div>

      {/* 素材列表 */}
      <div className="material-categories">
        {filteredCategories.length > 0 ? (
          filteredCategories.map(category => (
            <div key={category.id} className="category">
              <div className="category-header">
                <h3>{category.name}</h3>
                <span className="view-all-button">
                  全部 &gt;
                </span>
              </div>
              
              <div className="material-grid">
                {category.materials.map(material => (
                  <div key={material.id} className="material-card">
                    <div 
                      className="material-thumbnail" 
                      style={{ backgroundImage: `url(${material.thumbnail})` }}
                    >
                   
                    </div>
                  
                  </div>
                ))}
              </div>
            </div>
          ))
        ) : (
          <div className="no-results">
            没有找到相关素材
            <button onClick={() => setSearchTerm('')}>清空搜索</button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Model;